<template>
  <div class="mask-container" v-if="visible">
      <div class="card">
          <div class="close" @click="closeMask">
              <!-- <img src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/close.png" alt=""> -->
          </div>
     
          <div class="avator" v-if="!isWhite">
              <img class="extend" :src="data.img_url" alt="">
          </div>
          
          <div class="form-data" v-if="!isWhite">
              
              <div class="item-wraper">
                  姓名:{{data.user_name}}
              </div>
              <div class="item-wraper">
                  职务:{{data.profession}}
              </div>
              <div class="item-wraper">
                  工号:{{data.job_number}}
              </div>
              <div class="item-wraper">
                  电话:{{data.phone}}
              </div>
              
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'default-mask',
    data(){
        return{
        }
    },
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        data:{},
        isWhite:{
            // type:Boolean,
            // default:true
        }
    },
    methods:{
        closeMask(){
            this.$emit("close")
        }
    },
    mounted(){
    }
}
</script>

<style lang="less" scoped>
    .extend{
        width: 100%;
        height: 100%;
        display: block;
    }
    .mask-container{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(2, 0, 0, 0.3);
        .card{
            position: absolute;
            width: 496px;
            height: 624px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background: url('http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/work-by.png');
            background-size: cover;
            background-repeat: no-repeat;
            .close{
                width: 37px;
                height: 37px;
                position: absolute;
                right: 10px;
                top: 10px;
                overflow: hidden;
                background: url('http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/close.png');
                background-repeat: no-repeat;
                background-size: cover;
            }
            .close:hover{
                cursor: pointer;
                background-position:100% 0;
            }
            .avator-error{
               position: absolute;
                top: 85px;
                left: 50%;
                transform: translateX(-50%);  
            }
            .avator{
                width: 178px;
                height: 221px;
                background: white;
                position: absolute;
                top: 156px;
                left: 50%;
                transform: translateX(-50%);
            }
            .form-data{
                position: absolute;
                bottom: 40px;
                left: 50%;
                transform: translate(-50%);
                .item-wraper{
                    margin-top: 20px;
                    font-size: 21px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }
    }
</style>